<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <meta charset="utf-8"/>
    <meta name="renderer" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <link rel="stylesheet" href="../base/css/element.css" />
    <link rel="stylesheet" href="../home/css/home.css"/>
    <title>主页</title>
</head>
<body>

<div id="main-home" class="main-home-div">
    <el-container>
        <el-header>
            <el-row>
                <el-col :span="4">
                    <div class="main-home-log">
                    </div>
                </el-col>
                <el-col :span="16">
                    <div>
                        <span>今天是：2020年04月25日，欢迎来到我的世界</span>
                    </div>
                </el-col>

                <el-col :span="1">
                    <div class="icon-el">
                        <el-tooltip class="item" effect="light" content="我的任务" placement="top-start">
                            <i class="el-icon-message-solid"></i>
                            <!-- 其他工具栏区域 -->
                        </el-tooltip>
                    </div>
                </el-col>
                <el-col :span="1">
                    <div class="icon-el">
                        <el-tooltip class="item" effect="light" content="我的信息" placement="top-start">
                            <i class="el-icon-user-solid"></i>
                            <!-- 其他工具栏区域 -->
                        </el-tooltip>
                    </div>
                </el-col>
                <el-col :span="1">
                    <div class="icon-el">
                        <el-tooltip class="item" effect="light" content="设置" placement="top-start">
                            <i class="el-icon-s-tools"></i>
                        <!-- 其他工具栏区域 -->
                        </el-tooltip>
                    </div>
                </el-col>

                <el-col :span="1">
                    <div class="icon-el">
                        <el-tooltip class="item" effect="light" content="安全退出" placement="top-start">
                            <i class="el-icon-remove"></i>
                            <!-- 其他工具栏区域 -->
                        </el-tooltip>
                    </div>
                </el-col>

            </el-row>

        </el-header>
        <el-container>
            <el-aside width="200px">
                <el-scrollbar
                        class="default-scrollbar"
                        wrap-class="default-scrollbar__wrap"
                        view-class="default-scrollbar__view">
                    <!-- 左侧菜单栏 -->
                    <!--:unique-opened="true"，default-active:默认展开的菜单页，-->
                    <el-col :span="24" class="meun-div">
                        <el-menu  class="el-menu-vertical"
                                  default-active="1"
                                  :unique-opened="true"
                                  @close="handleClose"
                                  ref="thisElMenu"
                                  v-model="meunTree"
                                  text-color="#fff">
                            <!-- 循环一级菜单，如果一级菜单没有子菜单，即自己就可以点击,字符小于10个-->
                            <el-menu-item
                                    th:each="resource,index: ${menu}"
                                    style="background-color:#7f7f7f"
                                    th:if="${resource.resourceInfoList eq null and resource.resourceName.length() le 10}"
                                    th:attr="index=${(index.index+1)},param=${resource.resourcePath}"
                                    v-on:click="openMenuUrl($event)">
                                <span slot="title"
                                      style="font-weight: bold"
                                      th:text="${resource.resourceName}"></span>
                            </el-menu-item>


                            <!-- 循环一级菜单，如果一级菜单没有子菜单，即自己就可以点击,字符小于10个，超长tips显示-->
                            <el-tooltip class="item" effect="light" placement="top-start"
                                        th:each="resource,index: ${menu}"
                                        th:attr="content=${resource.resourceName}" content="">
                                <el-menu-item
                                        style="background-color:#7f7f7f"
                                        th:if="${resource.resourceInfoList eq null and resource.resourceName.length() gt 10}"
                                        th:attr="index=${(index.index+1)},param=${resource.resourcePath}"
                                        v-on:click="openMenuUrl($event)">
                                        <span slot="title"
                                              style="font-weight: bold"
                                              th:text="${#strings.substring(resource.resourceName,0,9)+'...'}"></span>
                                </el-menu-item>
                            </el-tooltip>
                            <!-- 循环一级菜单，如果一级菜单有子菜单，即自己打开-->
                            <el-submenu
                                    style="background-color:#7f7f7f"
                                    th:each="resource,index: ${menu}"
                                    th:if="${resource.resourceInfoList ne null}"
                                    th:attr="index=${(index.index+1)}">
                                <template slot="title">
                                    <!-- 大于10个字符加tips -->
                                    <el-tooltip class="item" effect="light" placement="top-start"
                                                th:if="${resource.resourceName.length() gt 10}"
                                                th:attr="content=${resource.resourceName}" content="" >
                                        <span style="font-weight: bold"
                                              th:text="${#strings.substring(resource.resourceName,0,9)+'...'}"
                                        ></span>
                                    </el-tooltip>

                                    <!-- 小于10个字符不加tips -->
                                    <span style="font-weight: bold"
                                          th:if="${resource.resourceName.length() le 10}"
                                          th:text="${resource.resourceName}"></span>

                                </template>
                                <!-- 循环二级菜单，二级菜单没有子菜单，即自己就可以点击，小于10个字符 -->
                                <el-menu-item
                                        th:each="child,cindex:${resource.resourceInfoList}"
                                        th:if="${child.resourceInfoList eq null and child.resourceName.length() le 10}"
                                        style="background-color:#9f9f9f"
                                        th:attr="index=${(index.index+1)+'-'+(cindex.index+1)},param=${child.resourcePath}"
                                        th:text="${child.resourceName}"
                                        v-on:click="openMenuUrl($event)">
                                </el-menu-item>

                                <!-- 循环二级菜单，二级菜单没有子菜单，即自己就可以点击，大于10个字符 -->
                                <el-tooltip class="item" effect="light" placement="top-start"
                                            th:each="child,cindex:${resource.resourceInfoList}"
                                            th:attr="content=${child.resourceName}" content="">
                                    <el-menu-item
                                            th:if="${child.resourceInfoList eq null and child.resourceName.length() gt 10}"
                                            style="background-color:#9f9f9f"
                                            th:attr="index=${(index.index+1)+'-'+(cindex.index+1)},param=${child.resourcePath}"
                                            th:text="${#strings.substring(child.resourceName,0,9)+'...'}"
                                            v-on:click="openMenuUrl($event)">
                                    </el-menu-item>
                                </el-tooltip>

                                <!-- 循环二级菜单，二级菜单有子菜单，即自己展开-->
                                <el-submenu
                                        th:each="child,cindex:${resource.resourceInfoList}"
                                        style="background-color:#9f9f9f"
                                        th:if="${child.resourceInfoList ne null}"
                                        th:attr="index=${(index.index+1)+'-'+(cindex.index+1)}">
                                    <template slot="title">
                                        <!-- 大于10个字符加tips -->
                                        <el-tooltip class="item" effect="light" placement="top-start"
                                                    th:if="${child.resourceName.length() gt 10}"
                                                    th:attr="content=${child.resourceName}" content="" >
                                            <span th:text="${#strings.substring(child.resourceName,0,9)+'...'}"></span>
                                        </el-tooltip>
                                        <!-- 小于10个字符不加tips -->
                                        <span th:if="${child.resourceName.length() le 10}"
                                              th:text="${child.resourceName}"></span>
                                    </template>
                                    <!-- 循环三级菜单，三级菜单没有子菜单，即自己就可以点击-->
                                    <!-- 大于10个字符加tips -->
                                    <el-tooltip class="item" effect="light" placement="top-start"
                                                th:each="cchild,ccindex:${child.resourceInfoList}"
                                                th:attr="content=${cchild.resourceName}" content="">
                                        <el-menu-item
                                                style="background-color:rgb(197, 197, 197)"
                                                th:if="${cchild.resourceName.length() gt 10}"
                                                th:attr="index=${(index.index+1)+'-'+(cindex.index+1)+'-'+(ccindex.index+1)},param=${cchild.resourcePath}"
                                                th:text="${#strings.substring(cchild.resourceName,0,9)+'...'}"
                                                v-on:click="openMenuUrl($event)">
                                        </el-menu-item>
                                    </el-tooltip>
                                    <!-- 小于10个字符不加tips -->
                                    <el-menu-item
                                            style="background-color:rgb(197, 197, 197)"
                                            th:each="cchild,ccindex:${child.resourceInfoList}"
                                            th:if="${cchild.resourceName.length() le 10}"
                                            th:attr="index=${(index.index+1)+'-'+(cindex.index+1)+'-'+(ccindex.index+1)},param=${cchild.resourcePath}"
                                            th:text="${cchild.resourceName}"
                                            v-on:click="openMenuUrl($event)">
                                    </el-menu-item>
                                    <!-- 目前只支持到三级菜单，如果有需要，可以在这里继续循环-->
                                </el-submenu>
                            </el-submenu>
                        </el-menu>
                    </el-col>
                </el-scrollbar>
            </el-aside>

            <el-main>
                <!--点击菜单返回页面区域  -->
                <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab" @tab-click="leftClickTab" class="tab-page">
                    <el-tab-pane
                            v-for="(item) in editableTabs"
                            :key="item.url"
                            :label="item.title"
                            :name="item.url"
                    >
                        <iframe :src="item.url" style="height: 100%;width: 100%;border: 0px"></iframe>
                    </el-tab-pane>
                </el-tabs>
            </el-main>

        </el-container>
    </el-container>
</div>

</body>
<script type="text/javascript" src="../base/js/jquery.min.js"></script>
<script type="text/javascript" src="../base/js/vue.min.js"></script>
<script type="text/javascript" src="../base/js/element.js"></script>
<script type="text/javascript" src="../base/js/common.js"></script>
<script type="text/javascript" src="../home/js/home.js"></script>
<script>
    $.initMenu('main-home',[{
        title: '首页',
        name: '/mian/index',
        url: '/mian/index',
    }],'/mian/index');
</script>
</html>